<template>
    <div class="comment-card row">
        <img class="card-img"
            :src="info.imgUrl"
            @click.stop="toPage"
            alt>
        <div class="column text">
            <h3>
                <a href="javascript:void(0);"
                    @click.stop="toCommentDetails">{{info.title}}</a>
            </h3>
            <div class="row auth">
                <a>{{info.auth}}</a>
                <a>评论</a>
                <a>《{{info.movieName}}》</a>
                <el-rate :allow-half="true"
                    v-model="info.imgNumber"
                    disabled></el-rate>
            </div>
            <div class="content row">
                {{info.comment}}
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: "comment-card",
    data() {
        return {
            value: 3.5
        }
    },
    props: {
        info: {
            type: Object,
            required: true
        }
    },
    methods: {
        toPage() {
            this.$router.push({ path: "/film_details" })
        },
        toCommentDetails() {
            this.$router.push({ path: "/comment_details" })
        }
    }
}
</script>

<style lang="less" scoped>
    .comment-card {
        min-height: 100px;
        width: 100%;
        overflow: hidden;
        zoom: 1;
        margin-bottom: 24px;
        padding-bottom: 24px;
        padding-top: 24px;
        border-bottom: 1px solid #eaeaea;
        justify-content: flex-start;
        align-items: flex-start;
        .card-img {
            width: 68px;
        }
        .text {
            margin-left: 10px;
            h3 {
                font-size: 15px;
                margin-bottom: 1px;
                color: #37a;
                a {
                    color: #37a;
                    text-decoration: none;
                    cursor: pointer;
                }
                &:hover {
                    a {
                        background: #4b8ccb;
                        color: #fff;
                    }
                }
            }
            .auth {
                color: #666;
                padding: 5px 0;
                &:hover {
                    a {
                        background: #4b8ccb;
                        color: #fff;
                    }
                }
            }
        }
        .content {
            font-size: 13px;
        }
    }
</style>
